<template>
   <div class="my_div">
    <img
      :src="dogImgUrl"
      alt=""
    />
    <p @click="changeColor" :style="{background:color[num]}">{{ dogName }}</p>
  </div>  

</template>

<script>
export default {
    props:['dogImgUrl','dogName','index'],
    data(){
        return {
         color:['white','red','green','blue','yellow','pink'],
         num:0
        }
    },
    methods:{
        // 子传父
        // subdog(){
       
        // },
            changeColor(){
            this.$emit('subdog',this.index)
            this.num =parseInt(Math.random()*5) 
            return this.num
        }
    },
    watch:{
        changeColor(n,o){
            console.log(n,o);
        }
    }
};
</script>

<style>
.my_div {
  width: 300px;
  border: 1px solid black;
  text-align: center;
  float: left;
}

.my_div img {
  width: 100%;
  height: 200px;
}
p{
    cursor: pointer;
    user-select: none;
}
</style>